<template>
    <div class="page-wrapper">
        <div class="page-wrapper__body is-list">
            <div class="page-container">
                <div class="grid-container">
                    <el-row class="grid-table-tool">
                        <el-col :span="18" class="tool-action">
                            <el-input v-model="params.key" placeholder="姓名/场次名称/学校名称" @keyup.enter="onSearch" style="width:400px;margin-right:10px;"></el-input>
                            <el-button type="primary" icon="el-icon-search" @click="onSearch">查询</el-button>
                        </el-col>
                        <el-col :span="6" class="tool-pagination">
                            <el-button type="primary" icon="el-icon-download" @click="onDownloadList">导出</el-button>
                            <el-button type="primary" icon="el-icon-delete" @click="onDel(0)" style="display: none">删除</el-button>
                        </el-col>
                    </el-row>
                    <el-table border class="grid-table" :data="resp.dataList" width="100%">
                        <el-table-column type="index" align="center" width="50"></el-table-column>
                        <el-table-column prop="name" label="姓名" ></el-table-column>
                        <el-table-column prop="sceneName" label="场次名称"></el-table-column>
                        <el-table-column prop="cityName" label="场次城市"></el-table-column>
                        <el-table-column prop="fieldName" label="场次地点"></el-table-column>
                        <el-table-column prop="schoolName" label="学校"></el-table-column>
                        <el-table-column prop="major" label="专业" ></el-table-column>
                        <el-table-column prop="edu" label="学历" ></el-table-column>
                        <el-table-column prop="tel" label="电话" ></el-table-column>
                        <el-table-column prop="email" label="邮箱" ></el-table-column>
                        <el-table-column prop="isOnline" label="参加方式" >
                            <template slot-scope="scope">
                                <p>{{scope.row.isOnline == 0 ? "线上报名" : (scope.row.isOnline == 1 ? "线下参加" : "在线观看")}}</p>
                                <el-button type="text" size="small" @click="onDel(scope.row.id)" style="margin-left: 5px;display: none">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-row class="grid-table-tool">
                        <el-col :span="12" class="tool-action">&nbsp;</el-col>
                        <el-col :span="12" class="tool-pagination">
                            <el-pagination background v-if="resp.total>params.pageSize"
                                           @size-change="handleSizeChange"
                                           @current-change="handleCurrentChange"
                                           :current-page="params.page"
                                           :page-sizes="[10,15, 20, 30, 40]"
                                           :page-size="params.pageSize"
                                           layout="total, sizes, prev, pager, next"
                                           :total="resp.total">
                            </el-pagination>
                        </el-col>
                    </el-row>
                    <el-table id="downloadList" :data="downloadList" style="display: none" >
                        <el-table-column prop="name" label="姓名" ></el-table-column>
                        <el-table-column prop="sceneName" label="场次名称"></el-table-column>
                        <el-table-column prop="cityName" label="场次城市"></el-table-column>
                        <el-table-column prop="fieldName" label="场次地点"></el-table-column>
                        <el-table-column prop="schoolName" label="学校"></el-table-column>
                        <el-table-column prop="major" label="专业" ></el-table-column>
                        <el-table-column prop="edu" label="学历" ></el-table-column>
                        <el-table-column prop="tel" label="电话" ></el-table-column>
                        <el-table-column prop="email" label="邮箱" ></el-table-column>
                        <el-table-column prop="isOnline" label="参加方式" >
                            <template slot-scope="scope">
                                <p>{{scope.row.isOnline == 0 ? "线上报名" : "线下参加"}}</p>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

    import XLSX from 'xlsx'
    import FileSaver from 'file-saver'
    import {findList,deleteOne} from '../../api/bmw/bmwStudent'

    export default {
        name: "studentList",
        data(){
            return{
                resp: {
                    dataList: [],
                    total: 0
                },
                params: {
                    key: '',
                    sort: '',
                    order: '',
                    page: 1,
                    pageSize: 15,
                },
                isLoading: false,
                downloadList:[]
            }
        },
        methods: {
            //信息导出
            onDownloadList(){
                var wb = XLSX.utils.table_to_book(document.querySelector("#downloadList"));
                console.log("wb===>", wb);
                var ws = wb.Sheets.Sheet1;
                ws['!cols'] = [{wpx: 100}, {wpx: 105}, {wpx: 100}, {wpx: 100}, {wpx: 100}, {wpx: 100}, {wpx: 100}, {wpx: 100}, {wpx: 100}, {wpx: 100}];
                for (var ww in ws) {
                    XLSX.utils.cell_set_number_format(wb.Sheets.Sheet1[ww], '@');
                }

                var wbout = XLSX.write(wb, {bookType: "xlsx", bookSST: true, type: "array"});
                try {
                    FileSaver.saveAs(new Blob([wbout], {type: "application/octet-stream"}), "学生报名信息.xlsx");
                } catch (e) {
                    if (typeof console !== "undefined") console.log(e, wbout);
                }
                return wbout;
            },
            handleSizeChange(val) {
                this.params.pageSize = val;
                this.onSearch();
            },
            handleCurrentChange(val) {
                this.params.page = val;
                this.loadData();
            },
            onSearch(){
                this.params.page = 1;
                this.loadData();
            },
            onDel(id){
                //console.log(id);
                this.del(id);
            },
            async del(id){
                let resp = await deleteOne(id)
                if (!this.qUtil.validResp(resp)) {
                    this.$message({type: 'error', message: '数据删除失败!', showClose: true});
                    return false;
                }
                this.$message({type: 'success', message: '删除数据成功!'});
                this.loadData();
            },
            async loadData(){
                this.isLoading = true;
                let resp = await findList(this.params);
                let params = {...this.params, page: 1, pageSize: 99999, key:''};
                let respAll = await findList(params);
                if (!this.qUtil.validResp(resp)) {
                    this.$message({type: 'error', message: '数据加载失败!', showClose: true});
                    this.isLoading = false;
                    return false;
                }
                if (this.qUtil.validResp(respAll)) {
                    this.downloadList = respAll.data.dataList;
                }
                this.isLoading = false;
                this.resp.dataList = resp.data.dataList;
                this.resp.total = resp.data.total;
            }
        },
        mounted(){
            this.loadData();
        }
    }
</script>

<style scoped>

</style>